<template>
	<view class="resume-box">
		<view class="resume-first">
			<view class="head-box">
				<view class="info-box"
					:style="{backgroundImage:'url(' + 'http://xczp.wanhedashuju.com/uploads/20220425/6ca9db966b41f0374056babb6c00cb49.png' + ')'}"
					@click="jumpMy()">
					<view class="photo-box">
						<image style="width: 100%;height: 100%;" :src="Form.head"></image>
					</view>
					<view class="name-box">
						<view class="name">
							<text>{{Form.name}}</text>
						</view>
						<view class="text" v-if="Form.drving">
							<text>{{Form.age_text}} · {{Form.drving_text}} · {{Form.date_text}}岁</text>
						</view>
					</view>
					<view class="edit">
						<text class="text">编辑资料</text>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="item-box">
					<view class="title-box">接单信息<text style="color: red;">*</text></view>
					<view class="cent-box" v-if="Form.type_text" @click="jumpIntention()">
						<view class="top">
							<view class="right">
								<view v-for="(item,index) in Form.type_text" :key="index" style="margin-right: 8rpx;">
									{{item}}
								</view>
								<view style="margin-top: 10rpx;">
									{{Form.areas_text}} · {{Form.salary}}
								</view>
							</view>
							<view class="let">
								<i class="iconfont fontclassarrow_right"></i>
							</view>
						</view>
					</view>
					<view class="cent-box-no" v-else>
						<view class="top">
							<view class="right">
								添加接单信息
							</view>
							<view class="let">
								<i class="iconfont fontclassarrow_right"></i>
							</view>
						</view>
					</view>
				</view>
				<view class="item-box">
					<view class="title-box" style="display: flex;" @click="jumpToExperience()"> <text>案例展示</text> <text
							class="add">添加</text>
					</view>
					<view v-if="experience.length>0">
						<view class="cent-box" v-for="(item,index) in experience" :key="index"
							@click="jumpToExperience(item)">
							<view class="top">
								<view class="right">
									{{item.position}}
								</view>
								<view class="let">
									<i class="iconfont fontclassarrow_right"></i>
								</view>
							</view>
							<view class="time">
								{{item.type_text}}
							</view>
							<view class="image-box">
								<image v-for="(itm,key) in item.image_list" :key="key" :src="itm" class="img"  @click="previewImage(key, item.image_list)"/>
							</view>
							<view class="txt">
								{{item.txt}}
							</view>
						</view>
					</view>

					<view class="cent-box-no" v-else @click="jumpToExperience()">
						<view class="top">
							<view class="right">
								添加案例
							</view>
							<view class="let">
								<i class="iconfont fontclassarrow_right"></i>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			Form: Object,
			experience: Array,
			educate: Array
		},
		name: "resume",
		data() {
			return {};
		},
		methods: {
			//跳转工作经历
			jumpToExperience(item) {
				if (uni.getStorageSync('token')) {
					if (item) {
						this.$tools.navigate(`/pages/resume/experience/index?item=${JSON.stringify(item)}`)
					} else {
						this.$tools.navigate(`/pages/resume/experience/index`)
					}
				} else {
					this.$tools.toast('请登录')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1000)
				}
			},
			//跳转教育经历
			jumpToEducation(item) {
				if (uni.getStorageSync('token')) {
					if (item) {
						this.$tools.navigate(`/pages/resume/education/index?item=${JSON.stringify(item)}`)
					} else {
						this.$tools.navigate(`/pages/resume/education/index`)
					}
				} else {
					this.$tools.toast('请登录')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1000)
				}
			},
			//完善资料
			jumpMy() {
				if (uni.getStorageSync('token')) {
					this.$tools.navigate(`/pages/user/myDatumh/index`)
				} else {
					this.$tools.toast('请登录')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1000)
				}
			},
			//添加接单信息
			jumpIntention() {
				if (uni.getStorageSync('token')) {
					this.$tools.navigate(`/pages/resume/intention/index?form=${JSON.stringify(this.Form)}`)
				} else {
					this.$tools.toast('请登录')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1000)
				}
			},
			//预览图片
			previewImage(index, urls) {
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.resume-box {
		// width: 100vw;
		min-height: calc(100vh - 48rpx);
		padding-bottom: 48rpx;
		// background: linear-gradient(180deg, #FFFFFF 0%, #FBFBFB 100%);
		background: #FFFFFF;

		.navbar {
			text-align: left !important;
		}

		.resume-first {

			.head-box {
				padding: 32rpx 32rpx 0rpx 32rpx;

				.info-box {
					position: relative;
					width: 686rpx;
					height: 200rpx;
					// background: linear-gradient(154deg, #E6F0F6 0%, #E6EBF6 35%, #C5D4EF 100%);
					background-size: contain;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					display: flex;
					align-items: center;

					.bg-img {
						position: absolute;
						top: 0rpx;
						left: 0rpx;
						z-index: -1;
						width: 686rpx;
						height: 200rpx;
					}

					.photo-box {
						width: 100rpx;
						height: 100rpx;
						border: 4rpx solid #FFFFFF;
						border-radius: 50%;
						margin-left: 24rpx;

						image {
							border-radius: 50%;
						}
					}

					.name-box {
						margin-left: 32rpx;

						.name {
							font-size: 40rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: bold;
							color: #202020;

						}

						.text {
							margin-top: 10rpx;
							font-size: 28rpx;
							font-family: DINPro-Medium, DINPro;
							font-weight: 500;
							color: rgba(32, 32, 32, 0.6);
						}
					}

					.edit {
						text-align: center;
						line-height: 64rpx;
						border-radius: 10rpx;
						width: 178rpx;
						height: 64rpx;
						transform: skewX(-15deg);
						text-align: center;
						background: rgba(255, 255, 255, 0.8);
						margin: 50px;
						opacity: 1;
						margin-left: auto;
						margin-right: 32rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: bold;
						color: #FF7700;

						.text {
							transform: skewX(15deg);
							display: block;
						}
					}
				}
			}

			.list-box {
				padding-left: 40rpx;

				.item-box {
					margin-top: 32rpx;
					border-bottom: 1rpx solid #20202014;
					opacity: 1;
					padding-bottom: 20rpx;

					.title-box {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: bold;
						color: #202020;

						.add {
							margin-left: auto;
							margin-right: 40rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: bold;
							color: #FF7700;
						}
					}

					.cent-box {
						padding: 32rpx 0rpx 0rpx 0rpx;

						.top {
							display: flex;

							.right {
								font-size: 28rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #202020;
							}

							.let {
								margin-left: auto;
								margin-right: 40rpx;
							}
						}

						.time {
							margin: 12rpx 0 16rpx;
							height: 36rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 36rpx;

						}

						.image-box {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.img {
								margin: 10rpx;
								width: 100rpx;
								height: 100rpx;
							}
						}

						.txt {
							padding: 10rpx 40rpx 10rpx 0rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}

					}

					.cent-box-no {
						padding: 32rpx 0rpx 10rpx 0rpx;

						.top {
							display: flex;

							.right {
								font-size: 28rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #202020;
							}

							.let {
								margin-left: auto;
								margin-right: 40rpx;
							}
						}
					}
				}

				.item-box-bot {
					margin-top: 32rpx;
					// border-bottom: 1rpx solid #20202014;
					opacity: 1;
					padding-bottom: 20rpx;

					.title-box {
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: bold;
						color: #202020;

						.add {
							margin-left: auto;
							margin-right: 40rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: bold;
							color: #FF7700;
						}
					}

					.cent-box {
						padding: 32rpx 0rpx 0rpx 0rpx;

						.top {
							display: flex;

							.right {
								font-size: 28rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #202020;
							}

							.let {
								margin-left: auto;
								margin-right: 40rpx;
							}
						}

						.time {
							margin: 12rpx 0 16rpx;
							height: 36rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #20202063;
							line-height: 36rpx;

						}

						.txt {
							height: 42rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #202020;
							line-height: 42rpx;
						}

					}

					.cent-box-no {
						padding: 32rpx 0rpx 10rpx 0rpx;

						.top {
							display: flex;

							.right {
								font-size: 28rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #202020;
							}

							.let {
								margin-left: auto;
								margin-right: 40rpx;
							}
						}
					}
				}
			}

			.bnt-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.bnt {
					margin-top: 150rpx;
					width: 259rpx;
					height: 100rpx;
					background: #FF6600;
					border-radius: 8rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 100rpx;
					text-align: center;
				}
			}
		}
	}
</style>